<div class="auth-main">
    <div class="auth-block">
        <h1>Ideabrew</h1>
        <div class="tips">
            <p style="text-align: center">Drop your idea here</p>
            <p style="text-align: center">watch it blend, boil, and ferment with many others</p>
        </div>

        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
            <div class="form-group row"
                 [ngClass]="{'has-error': (!form.get('email').valid && form.get('email').touched), 'has-success': (form.get('email').valid && form.get('email').touched)}">
                <label for="inputEmail3" class="col-sm-1 col-xs-2 control-label custom-width-10 input-label">
                    <i _ngcontent-tcq-7="" class="fa fa-envelope fa-2x"
                       style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i>
                </label>

                <div class="col-sm-10 col-xs-10">
                    <input formControlName="email" type="email" class="form-control" id="inputEmail3"
                           placeholder="Email">
                </div>
            </div>
            <div class="form-group row"
                 [ngClass]="{'has-error': (!form.get('password').valid && form.get('password').touched), 'has-success': (form.get('password').valid && form.get('password').touched)}">
                <label for="inputPassword3" class="col-sm-1 col-xs-2 control-label custom-width-10 input-label">
                    <i _ngcontent-tcq-7="" class="fa fa-key fa-2x"
                       style="color: #000;padding-left: 15px;position: relative;top: 5px;"></i>
                </label>
                <div class="col-sm-10 col-xs-10">
                    <input formControlName="password" type="password" class="form-control" id="inputPassword3"
                           placeholder="Password">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10 custom-offset-10 custom-sigin">
                    <button [disabled]="!form.valid || submitted" type="submit" class="btn btn-default btn-auth lgn">
                        Sign in
                    </button>
                    <a [routerLink]="['/forgot']" class="forgot-pass">Forgot password?</a>
                </div>
            </div>
        </form>

        <div class="auth-sep">
            <p>
                <a [routerLink]="['/register']" class="auth-link">New to CrowdSourcing? Sign up!</a>
            </p>
            <!--<p>
               <span>
                <span style="text-align: right;">or Sign in with one click</span>
               </span>
                <span style="width: 15%;padding: 0 0px;">
        <i class="socicon socicon-facebook" title="Sign in with Facebook"
           style="width: 2.2em;line-height: 2.3;color: #fff;right: 20px;" (click)="onFacebookLoginClick()"></i>
      </span>
            </p>-->

        </div>
    </div>
</div>
